<template>
    <view class="page">
        <view class="head-back">
            <view class="back" @click="onBack">
                <text></text>
            </view>
            <view class="title">
                <image src="/static/flash_title.png" mode=""></image>
            </view>
        </view>
        <view class="head-bg">
            <view class="session" :class="{'activity':scrollTop > 50}">
                <view class="list action">
                    <text class="time">16:00</text>
                    <text class="status">抢购中</text>
                </view>
                <view class="list">
                    <text class="time">18:00</text>
                    <text class="status">即将开始</text>
                </view>
                <view class="list">
                    <text class="time">20:00</text>
                    <text class="status">即将开始</text>
                </view>
                <view class="list">
                    <text class="time">22:00</text>
                    <text class="status">即将开始</text>
                </view>
                <view class="list">
                    <text class="time">00:00</text>
                    <text class="status">即将开始</text>
                </view>
            </view>
        </view>
        <view class="goods-list">
            <view class="list" v-for="(item,index) in 8" @click="onGoods" :key="index">
                <view class="thumb">
                    <image :src="'/static/img/goods_thumb_0'+(index+1)+'.png'"></image>
                </view>
                <view class="item">
                    <view class="title">
                        <text class="one-omit">薇妮(Viney)时尚包包女包牛皮单肩包女休闲百搭斜挎包韩版小方包潮(水电费枪色)</text>
                    </view>
                    <view class="price-data">
                        <view class="price">
                            <text>￥2999.00</text>
                            <text class="lineation ">￥3299</text>
                        </view>
                        <view class="data">
                            <view class="btn">
                                <text>立即抢购</text>
                            </view>
                            <view class="schedule">
                                <view class="num">已售50%</view>
                                <view class="bar">
                                    <text></text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            scrollTop: 0,
        };
    },
    onPageScroll(e) {
        this.scrollTop = e.scrollTop;
    },
    methods: {
        /**
         * 返回
         */
        onBack() {
            uni.navigateBack();
        },
        /**
         * 商品点击
         */
        onGoods() {
            uni.navigateTo({
                url: '/pagesA/mall/goodsDetails?type=1'
            })
        }
    }
}
</script>

<style scoped lang="scss">
.page {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #f6f6f6;
}
.head-back {
    position: relative;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    width: 100%;
    height: 100rpx;
    /* #ifdef APP-PLUS */
    height: calc(120rpx + var(--status-bar-height));
    padding-top: var(--status-bar-height);
    /* #endif */
    /* #ifdef MP */
    height: 150rpx;
    padding-top: var(--status-bar-height);
    /* #endif */
    background: linear-gradient(to right, $base, $change-clor);
    .back {
        position: absolute;
        left: 0;
        top: 0;
        /* #ifdef APP-PLUS */
        top: var(--status-bar-height);
        /* #endif */
        /* #ifdef MP */
        top: var(--status-bar-height);
        /* #endif */
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100rpx;
        height: 100rpx;
        text {
            display: flex;
            width: 20rpx;
            height: 20rpx;
            border-left: 2rpx solid #ffffff;
            border-bottom: 2rpx solid #ffffff;
            transform: rotate(45deg);
        }
    }
    .title {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100rpx;
        image {
            width: 200rpx;
            height: 50rpx;
        }
    }
}

.head-bg {
    width: 100%;
    height: calc(300rpx + var(--status-bar-height));
    background: linear-gradient(to right, $base, $change-clor);
    border-radius: 0 0 20% 20%;
    padding-top: 100rpx;
    /* #ifdef APP-PLUS */
    padding-top: calc(150rpx + var(--status-bar-height));
    /* #endif */
    /* #ifdef MP */
    padding-top: 150rpx;
    /* #endif */
    .session {
        display: flex;
        align-items: center;
        width: 100%;
        height: 100rpx;
        .list {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 20%;
            height: 100%;
            .time {
                font-size: 32rpx;
                font-weight: bold;
                color: #ff9aa9;
            }
            .status {
                font-size: 24rpx;
                color: #ff9aa9;
            }
        }
        .action {
            .time {
                color: #ffffff;
            }
            .status {
                color: #ffffff;
            }
        }
    }
    .activity {
        position: fixed;
        left: 0;
        top: 100rpx;
        /* #ifdef APP-PLUS */
        top: calc(100rpx + var(--status-bar-height));
        /* #endif */
        /* #ifdef MP */
        top: 150rpx;
        /* #endif */
        z-index: 100;
        background-color: #ffffff;
        .list {
            .time {
                font-size: 32rpx;
                font-weight: bold;
                color: #222222;
            }
            .status {
                font-size: 24rpx;
                color: #222222;
            }
        }
        .action {
            .time {
                color: $base;
            }
            .status {
                color: $base;
            }
        }
    }
}

.goods-list {
    padding: 0 4%;
    margin: 20rpx auto;
    .list {
        display: flex;
        align-items: center;
        padding: 0 4%;
        height: 200rpx;
        background-color: #ffffff;
        border-radius: 20rpx;
        margin-bottom: 20rpx;
        .thumb {
            display: flex;
            align-items: center;
            width: 30%;
            height: 100%;
            image {
                width: 160rpx;
                height: 160rpx;
                border-radius: 10rpx;
            }
        }
        .item {
            width: 70%;
            height: 100%;
            .title {
                display: flex;
                align-items: center;
                width: 100%;
                height: 60rpx;
                text {
                    font-size: 26rpx;
                    color: #222222;
                }
            }
            .price-data {
                display: flex;
                align-items: center;
                width: 100%;
                height: 140rpx;
                .price {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    width: 40%;
                    height: 100%;
                    text {
                        color: $base;
                        font-size: 32rpx;
                        font-weight: bold;
                    }
                    .lineation {
                        font-size: 24rpx;
                        color: #959595;
                        font-weight: normal;
                        text-decoration: line-through;
                    }
                }
                .data {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: flex-end;
                    width: 60%;
                    height: 100%;
                    .btn {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 160rpx;
                        height: 60rpx;
                        background: linear-gradient(
                            to right,
                            $base,
                            $change-clor
                        );
                        border-radius: 70rpx;
                        font-size: 26rpx;
                        color: #ffffff;
                    }
                    .schedule {
                        display: flex;
                        align-items: center;
                        width: 100%;
                        height: 40rpx;
                        .num {
                            font-size: 24rpx;
                            color: #959595;
                        }
                        .bar {
                            width: 160rpx;
                            height: 12rpx;
                            border: 2rpx solid $rgba-05;
                            border-radius: 10rpx;
                            margin-left: 10rpx;
                            text {
                                display: flex;
                                width: 50%;
                                height: 100%;
                                background-color: $rgba-05;
                                animation: bar 1s linear;
                            }
                            @keyframes bar {
                                0% {
                                    width: 0;
                                }
                                100% {
                                    width: 50%;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
